<template>
  <div class="HomeHeader">
    <div class="row align-items-center text-light bg-info head-wrap">
      <div class="col-3 text-center px-1">
        <span class="text-light">
          <span class="iconfont">&#xe720;</span>返回
        </span>
      </div>
      <div class="col d-flex position-relative px-1">
        <div class="search-icon text-info">
          <span class="iconfont">&#xe741;</span>
        </div>
        <input
          type="text"
          class="search-input w-100 rounded text-info"
          placeholder="Username"
          required
        >
      </div>
      <div class="col-3 text-center txt-ellipsis px-1">
        <router-link to="/city">
          <span class="text-white">
            {{this.$store.state.city}}
            <span class="iconfont text-white">&#xe749;</span>
          </span>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeHeader",
  props: {
    // city: String
  },
  data() {
    return {
      // curCity: ""
    };
  },
  computed: {
    disLocation() {
      return this.city;
    }
  },
  created() {
    // this.city = JSON.parse(window.localStorage.getItem("city")) || "anyang";
  }
};
</script>


<style scoped>
.search-icon {
  position: absolute;
  top: 0rem;
  left: 1rem;
}
.search-icon span {
  display: block;
  height: 1.8rem;
  line-height: 1.8rem;
}
</style>
